<script setup>
import { onMounted, ref } from 'vue'
import { deleteEmpApi, searchEmpByEnameApi } from '@/api/EmpApi.js'
import { ElMessage , ElMessageBox} from 'element-plus'
import EditEmp from '@/components/EditEmp.vue'
// 检索添加部分内容
const ename = ref('')

//展示员工信息列表
const tableData = ref([
  {
    empno: 1001,
    ename: '张三',
    deptno: 10,
    job: '程序员',
    sal: 5000
  },
  {
    empno: 1002,
    ename: '张三',
    deptno: 10,
    job: '程序员',
    sal: 5000
  },
  {
    empno: 1003,
    ename: '张三',
    deptno: 10,
    job: '程序员',
  }
])
const searchEmp = async () => {
  //console.log('search!')
  // 检索员工信息
  let res = await searchEmpByEnameApi(ename.value)
  //console.log(res)
  if (res.code == 0) {
    tableData.value = res.data
  }
}
//
onMounted(()=>{
  searchEmp()
})
const search = () => {
  searchEmp()
}
const deleteEmp = async (empno) => {
  //console.log('delete!')
  // 删除员工信息
  ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    let res = await deleteEmpApi(empno)
    //console.log(res)
    if (res.code == 0) {
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      searchEmp()
    }else {
      ElMessage({
        type: 'info',
        message: '已取消删除'
      })
    }

  })
}
//**********************添加员工信息
const editEmpCom = ref(null)
const onAddEmp = () => {
  //console.log('add!')
  // 添加员工信息
  editEmpCom.value.init()
}
//**********************修改员工信息
const updateEmp = (row) => {
  //console.log('update!')
  // 修改员工信息
  editEmpCom.value.init(row)
}
</script>

<template>
<!--  第一行-->
  <el-row :gutter="20">
    <el-col :span="12" :offset="6">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="员工姓名">
          <el-input v-model="ename" placeholder="请输入检索的员工姓名" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" size="small" @click="onAddEmp">添加</el-button>
        </el-form-item>
      </el-form>
    </el-col>

  </el-row>
  <!--  第二行-->
  <el-row :gutter="20">
    <el-col :span="12" :offset="6">

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="empno" label="员工编号" width="150" />
        <el-table-column prop="ename" label="姓名" width="150" />
        <el-table-column prop="deptno" label="部门编号" width="120" />
        <el-table-column prop="job" label="职务" width="120" />
        <el-table-column prop="sal" label="工资" width="120" />

        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button link type="primary" size="default" @click="deleteEmp(scope.row.empno)">
              删除
            </el-button>
            <el-button link type="primary" size="default" @click="updateEmp(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-col>
  </el-row>
<EditEmp ref="editEmpCom" @success="searchEmp"></EditEmp>
</template>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
